<template>
    <div class="item-content">
        <div class="item-media"><i class="icon" :class="icon"></i></div>
        <div class="item-inner">
            <div class="item-title label">
                <div class="textCenter">{{name}}</div>
            </div>
            <div class="item-input">
                <input type="text" :value="value" @click="editAddress(value)">
            </div>
        </div>
    </div>
</template>
<style>
</style>
<script>
    import * as FStorage from '../util/FStorage'
    export default{
        props: ['name', 'icon', 'key', 'value'],
        components: {},
        methods: {
            editAddress(address) {
                var ctx = this;
                $.modal({
                    title: '编辑服务端地址',
                    text: '<input type="text" onfocus="toInputEnd(this)" value="' + address + '" id="addressEdit" class="modal-text-input" style="text-align: center;">',
                    buttons: [
                        {
                            text: '取消',
                        },
                        {
                            text: '确定',
                            onClick: function () {
                                var newAddress = $('#addressEdit').val()
                                FStorage.setLocalItem(ctx.key, newAddress)
                                ctx.value = newAddress
                            }
                        }
                    ]
                });
                $('#addressEdit').focus()
            }
        }
    }
    window.toInputEnd = function (obj) {
        var len = obj.value.length;
        if (document.selection) {
            var sel = obj.createTextRange();
            sel.moveStart('character', len);
            sel.collapse();
            sel.select();
        } else if (typeof obj.selectionStart == 'number'
                && typeof obj.selectionEnd == 'number') {
            obj.selectionStart = obj.selectionEnd = len;
        }
    }
</script>
